<template>
  <span class="wrap" @click="clickSendCode()">
    <el-button v-if="showSendBtn" type="primary">{{ getText }}</el-button>
    <el-button v-else type="info" disabled>{{count}}s后重新发送</el-button>
  </span>
</template>

<script>
const TIME_COUNT = 60;
import {getMessageVcode} from '@/api/others'

  export default {
    props: ['phone', 'params'],
    components: {

    },
    data() {
      return {
        showSendBtn: true,
        count: '',
        getText: '获取验证码',
        timer: null,
        newTel: null,
      }
    },
    created() {

    },
    methods: {
      clickSendCode(){
        if(this.showSendBtn == false){
          return false
        }
        debugger;
        // 验证码
        getMessageVcode({mobile:this.newTel,codeType:4}).then(res => {
          this.log(res);
          if(res.code == 200){
            this.sendTimeDown();
            this.vcodeCallback(res);
            this.$message.success('提示：已发送短信，请注意查收!');
          }
        }).
        catch(res =>{
          console.log(res)
        })

      },
      // 验证码倒计时
      sendTimeDown() {
        if (!this.timer) {
          this.count = TIME_COUNT;
          this.showSendBtn = false;
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_COUNT) {
              this.count--;
            } else {
              this.showSendBtn = true;
              clearInterval(this.timer);
              this.timer = null;
              this.getText = '重新获取'
            }
          }, 1000)
        }
      },

      vcodeCallback(phone) {
        this.$emit('vcodeCallback', phone);
      },
      getNewTel(val) {
        this.newTel = val;
        console.log(this.newTel)
      }
    }
  }
</script>

<style lang="scss" scoped>
.getVcode{
  width: 120px;
}
.el-button{
  width: 140px;
}
</style>
